<template>
  <div class="ms-organization-wrap" v-if="organization.length">
    <div class="ms-organization-body" v-show="visible">
      <div class="ms-organization-router" v-if="organizationNavs.length">
        <a v-for="(nav, index) in organizationNavs" :key="nav.value" @click.prevent.stop="changeNav(nav, index)">{{nav.label}}<span v-if="(organizationNavs.length - 1) !== index">></span></a>
      </div>
      <div class="ms-organization-router" v-else>
        <p>请选择：</p>
      </div>
      <div  class="ms-organization-content">
        <ul class="ms-organization-options">
          <li :class="{ active: item.value === cur }" :key="item.value" v-for="item in currOrganization" @click.stop="showChild(item)"><div>{{item.label}}</div></li>
        </ul>
      </div>
    </div>
    <div class="ms-organization-footer">
        <van-button block @click="onConfirm">确认</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'form-organization',
  props: {
    organization: {
      type: Array,
      default: ()=>[]
    },
    organizationNavsProps:{
      type:Array,
      default:()=>[]
    },
  },
  data () {
    return {
      organizationNavs: this.organizationNavsProps,
      currOrganization: this.organization,
      content: [],
      result: null,
      visible: true,
      cur: '',
      toggleSelect:'',
    }
  },
  activated(){
    if (localStorage.getItem('page') != 'subordinatesInfoDelay' && this.organizationNavsProps.length) {
      this.changeNav (this.organizationNavsProps, 0)
      this.currOrganization = this.organization;
    }
  },
  methods: {
    toggleChild: function () {
      this.visible ? this.hide() : this.show()
    },
    show () {
      this.visible = true
      document.addEventListener('click', this.closeOnDocumentClick, false)
    },

    hide () {
      this.visible = false
      document.removeEventListener('click', this.closeOnDocumentClick, false)
    },

    closeOnDocumentClick (e) {
      if (!this.$el.contains(e.target)) {
        this.hide()
      }
    },
    showChild (item) {
        // console.log(item);
        let arr = {};
        arr.value = item.value;
        arr.label = item.label;
        let organizationNavs = this.organizationNavs
        let currOrganization = this.currOrganization
        if (item.children && item.children.length) {
            organizationNavs.push({
            value: item.value,
            label: item.label,
            children: item.children,
            parentNode: currOrganization
            })
            this.content.push({
            value: item.value,
            label: item.label
            })
            this.organizationNavs = organizationNavs
            this.currOrganization = item.children
        } else if (this.content.indexOf(item) === -1) {
            if (this.cur) {
                this.content.pop()
            }
            this.content.push({
                value: item.value,
                label: item.label
            })
            this.cur = item.value
        }
        this.result = item;
    },
    changeNav (nav, index) {
      this.result = null;
      let organizationNavs = this.organizationNavs
      let content = this.content
      this.currOrganization = nav.parentNode
      if (index === 0) {
        this.content = []
        this.organizationNavs = []
      } else {
        this.organizationNavs = organizationNavs.splice(0, index)
        this.content = content.splice(0, index)
      }
      this.cur = '';
    },
    onConfirm(){
      // console.log(this.result)
        // console.log(this.organizationNavs)
        // console.log(this.cur);
        // this.$emit('filterOrganization',this.result);
        // this.$emit('organizationNavs',this.result)
        // if(this.organizationNavs.length) this.$emit('organizationNavs',this.organizationNavs);
        if (this.result) {
            this.$emit('organizationNavs',this.result)
        } else {
            this.$emit('organizationNavs',this.organizationNavs)
        }
    }
  },
  beforeDestroy () {
    this.hide()
  }
}
</script>

<style lang="less">
/*级联选择器*/
.ms-organization-wrap {
  display: inline-flex;
  position: relative;
  width: 100%;
  height: 100%;
}
.ms-organization-body {
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 100;
  width: 100%;
  height: 295px;
  background: #fff;
  overflow: hidden;
//   box-shadow: 0 0 6px 0 rgba(0,0,0,.1), 0 0 12px 5px rgba(0,0,0,.1);
}
.ms-organization-router {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-x: scroll;
  p{
      font-size: 14px;
      font-weight: bold;
      color: #333;
      font-family: 'PingFang-SC-Bold';
  }
  a {
    cursor: pointer;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    span{margin: 0 5px;}
  }
  a:last-child{border-bottom: 1px solid #333;}
}
.ms-organization-content {
  height: 255px;
}
.ms-organization-options {
  list-style: none;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 250px;
}
.ms-organization-options li {
    width: 100%;
    height: 40px;
    line-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(10,18,32,.8)
}
.ms-organization-options li:hover{
  color: rgba(10,18,32,.87);
  background-color: rgba(232,235,237,.6)
}
.ms-organization-options li.active{
  color: #02ccbd;
}
.ms-organization-footer{
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    .van-button--default{
        height: 40px;
        line-height: 40px;
        background: #02ccbd;
        border: none;
        color: #fff;
    }
}
</style>
